import React from 'react'
import Taro from '@tarojs/taro'
import './index.less'
import http from '../../utils/http'

import { View, Text, Image } from "@tarojs/components";
import { AtProgress } from 'taro-ui'



class Study extends React.Component {

  constructor() {
    super(...arguments)
    this.state = {
      projectListData: []
    }
  }

  /* 去培训 */
  toTrain = (id) => {
    Taro.navigateTo({ url: `/pages/study/train/index?id=${id}` })
  }
  /* 获取个人项目列表*/
  getProject = async () => {
    const { id } = JSON.parse(Taro.getStorageSync('userInfo') || '{}')
    const { data: res } = await http({
      url: '/implement/getMineProject',
      data: { id }
    })
    if (res.error !== 0) return
    const newData = res.data
    newData.forEach(v => {
      v.end_time = v.end_time.split('T')[0]
    })
    this.setState({ projectListData: newData })
  }
  /* 渲染项目列表 */
  projectList = () => {
    return this.state.projectListData.map(v => {
      return (
        <View key={v.id} className='project_box' onClick={() => this.toTrain(v.id)}>
          <View className='at-row'>
            {/* 封面 */}
            <View className='at-col'>
              <Image
                className='cover'
                src={v.cover_img_url}
              />
            </View>
            {/* 详细 */}
            <View className='at-col'>
              <View className='h3'>{v.title}</View>
              <View className='h4'>培训类型：{v.classes}</View>
              <View className='h4'>难度：{v.level}</View>
              <View className='h4'>截止时间：{v.end_time}</View>
            </View>
          </View>
          <AtProgress percent={v.learning_process} className='process' />
        </View>
      )
    })
  }


  componentDidMount() {
    /* 挂载后获取项目列表 */
    this.getProject()
  }


  render() {
    return (
      <View className='study_box'>
        {/* 标题 */}
        <View className='h2'>
          <Text>学习</Text>
        </View>

        {/* 大纲 */}
        <View className='at-row at-row__justify--between'>
          <Text className='h5'>完成度</Text>
          <Text className='h5'>难度</Text>
          <Text className='h5'>时间</Text>
        </View>

        {/* 项目列表 */}
        <View>
          {this.projectList()}
        </View>
      </View>
    )
  }
}

export default Study